import React, {Component} from 'react';
import {
    View,
    Text,
    Image,
    StyleSheet,
    TouchableOpacity,
    Dimensions,
    ScrollView,
    ListView,
    ImageBackground,
} from 'react-native';
import Swiper from 'react-native-swiper';

let { width, height } = Dimensions.get('window');

let dynamic='http://yw.test.xishisoft.com/user/financingNo.do';

let items=[];
export default class Home extends Component {
    constructor(props){
        super(props);
        this.state = {
                 data:null
              };
    }
     componentDidMount(){
            fetch('http://www.imooc.com/api/teacher?type=4&num=30')
            .then((response) => response.json())
            .then((jsonData) => {
              this.setState({
                data: new ListView.DataSource({rowHasChanged: (r1,r2) => r1!==r2 }).cloneWithRows(jsonData.data),
              });
            })
            .catch((error) => {
              alert(error);
            });
          }
     renderRow(rowData){
             return(
               <View
                 style = {styles.lvRow}>
                   <Image
                     style = { styles.imgbt }
                     source = { { uri: rowData.picSmall } }/>
                 <View
                   style = { styles.textView }>
                   <Text
                     style = { styles.textTitle }
                     numberOfLines = { 1 }>
                     { rowData.name }
                   </Text>
                   <Text
                     style = { styles.textContent }>
                     { rowData.description }
                   </Text>
                 </View>
               </View>
             )
           }
     //banner
     _renderSwiper() {
        return (
            <Swiper  style={styles.swiper}
               height={150}
               horizontal={true}
               autolay={true}
               loop={true}
               paginationStyle={{ bottom: 20 }}
               showsPagination={true}
               index={0}
               dotStyle={{ backgroundColor: 'rgba(0,0,0,.2)', width: 6, height: 6 }}
               activeDotStyle={{ backgroundColor: 'rgba(0,0,0,.5)', width: 6, height: 6 }}>
                <View style={styles.swiperItem}>
                    <Image style={styles.img} source={require('../images/banner/banner2.jpg')}></Image>
                </View>
                 <View style={styles.swiperItem}>
                    <Image style={styles.img} source={require('../images/200.jpg')}></Image>
                </View>
            </Swiper>
        )

     }
    render() {
    if(!this.state.data){
          return(
              <Text>loading...</Text>
          );
        } else {
          return (
              <ScrollView contentContainerStyle={styles.contentContainer}>
                <View style={styles.container}>
                    <View >
                        <ScrollView style={styles.height}>
                              {this._renderSwiper()}
                          </ScrollView>
                     </View>
                     <View style={styles.activity}>
                        <View>
                            <Image style={styles.activityImg} source={require('../images/icon/huotext.png')}></Image>
                        </View>
                        <View>
                           <Text style={styles.activityText}> 新注册用户 千元交易免押金体验 限时专享</Text>
                        </View>
                     </View>

                    <View style={styles.contentG}>
                        <View style={styles.flexR}>
                            <View>
                               <ImageBackground style={{height:58,width:58}} source={require('../images/icon/huotext.png')} resizeMode='cover'>
                               </ImageBackground>
                            </View>
                            <View>
                                <Text style={{fontSize:14,paddingLeft:10,color:'#000',paddingTop:8,paddingBottom:5}}>发起交易</Text>
                                <Text style={{fontSize:12,paddingLeft:10,color:'#888'}}>立即去交易 </Text>
                            </View>
                        </View>
                        <View style={{borderLeftWidth:1,borderLeftColor:'#ededed',flex:1,  flexDirection: 'row',paddingLeft:12}}>
                           <View>
                              <ImageBackground style={{height:58,width:58}} source={require('../images/icon/huotext.png')} resizeMode='cover'>
                              </ImageBackground>
                           </View>
                           <View >
                               <Text style={{fontSize:14,paddingLeft:10,color:'#000',paddingTop:8,paddingBottom:5}}>新手帮助</Text>
                               <Text style={{fontSize:12,paddingLeft:10,color:'#888'}}>一分钟教程系列 </Text>
                           </View>
                       </View>
                    </View>

                    <View style={[styles.flexR,styles.bulletin]}>
                        <View>
                            <Text style={[styles.line4,styles.paddingRight10]}>点点<Text style={styles.bullColor}>快报</Text></Text>
                        </View>
                        <View>
                            <Text style={styles.line4}>浮云落地 分到搭档快意电梯盈利258元</Text>
                        </View>
                    </View>

                    <View style={styles.list}>
                        <ListView style={styles.list}
                           dataSource={this.state.data}
                           renderRow={(rowData) => this.renderRow(rowData)}>
                         </ListView>
                     </View>
                </View>
             </ScrollView>
          );
        }

    }

}

const styles = StyleSheet.create({
container:{
// flex: 1,
},
contentContainer:{
     paddingVertical: 0
},
    viewHeight:{
        height:height,
    },
    height:{
        height:150,
    },


     swiper: {
        width:width,
        height:150,
     },
     img: {
        width: width,
        height: 150,
     },
       lvRow: {
         flex: 1,
         flexDirection: 'row',
         padding: 10,
       },
       textView: {
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
         padding: 5,
       },

       textTitle: {
         flex: 1,
         textAlign: 'center',
         color: '#f00',
       },

       textContent: {
         flex: 1,
         fontSize: 11,
         color: '#000',
         textAlign: 'center',
       },

       imgbt: {
         height: 55,
         width: 100,
       },

       activity:{
          flex:1,
          height:35,
          flexDirection:'row',
          backgroundColor:'#fff',
//          paddingTop:5,
//          paddingBottom:5,
          paddingLeft:12,
       },
       activityImg:{
            width:70,
            height:15,
            marginTop:10
       },
       activityText:{
            fontSize:12,
            lineHeight:35,
            paddingLeft:10,
       },
       contentG:{
            flex: 1,
            flexDirection: 'row',
            marginTop:10,
            paddingTop:10,
            paddingLeft:12,
            paddingBottom:10,
            paddingRight:12,
            backgroundColor:"#fff"
       },
       flexR:{
            flex: 1,
            flexDirection: 'row',
       },
            bulletin:{
                height:40,
                backgroundColor:'#fff',

                marginTop:10,
                paddingLeft:12,
                paddingRight:12,
            },
        line4:{
            lineHeight:40,
            fontSize:14,
        },
        bullColor:{
            color:'#f1106b',
            fontSize:18,

        },
        paddingRight10:{
            paddingRight:10,
        }
});